<template>
  <div>
    <el-card>
      <span>胡帅</span>
      <el-form :inline="true">
        <!-- 搜索+按钮 -->
        <el-form-item>
          <el-input v-model="input" placeholder="根据用户名搜索"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" @click="clearInput">清空</el-button>
          <el-button size="mini" type="primary" @click="searchInput">搜索</el-button>
        </el-form-item>
        <el-form-item style="float:right">
          <el-button @click="showDialog" size="mini" type="success" icon="el-icon-edit">新增用户</el-button>
        </el-form-item>
        <el-alert type="info" :closable="false">
          <!-- 记录栏 -->
          <template>
            <i class="el-icon-info"></i>
            共{{ count }}条记录
          </template>
        </el-alert>
        <!-- 表格 -->
        <template>
          <el-table
            :data="userInfo"
            :header-cell-style="{textAlign: 'center'}"
            :cell-style="{ textAlign: 'center' }"
            style="width: 100%">
            <el-table-column
              type="index"
              label="序号"
              width="180">
            </el-table-column>
            <el-table-column
              prop="email"
              label="邮箱"
              width="180">
            </el-table-column>
            <el-table-column
              prop="phone"
              label="联系电话">
            </el-table-column>
            <el-table-column
              prop="username"
              label="用户名">
            </el-table-column>
            <el-table-column
              prop="permission_group_title"
              label="权限组名称">
            </el-table-column>
            <el-table-column
              prop="role"
              label="角色">
            </el-table-column>
            <el-table-column label="操作">
              <template v-slot='{ row }'>
                <el-button @click="editUserItem(row)" class="skyblue" type="primary" icon="el-icon-edit" circle></el-button>
                <el-button @click="delUserItem(row)" class="red"  type="danger" icon="el-icon-delete" circle></el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
        <Pagination
        :total='count'
        @CurrentChange='onLoadList'
        @SizeChange='onSizeChange'
        :pageItem='tablePage'
        :arr='userInfo'
        :arrItem='userInfoItem'
        />
      </el-form>
    </el-card>
    <!-- 弹框 -->
    <ShowDialog
    @updateLoadList='loadList()'
    :userInfo='userInfo'
    :dialogVisible.sync='isShowDialog'
    :DialogList='DialogList'
    @formList='onFormList'
    />
  </div>
</template>

<script>
import { list, remove } from '@/api/base/users.js'
import Pagination from '../components/Pagination.vue'
import ShowDialog from '../components/ShowDialog.vue'
export default {
  name: 'manege',
  data () {
    return {
      tablePage: {
        page: 1,
        pagesize: 10,
        keyword: '',
        disabled: 1
      },
      userInfoItem: [],
      count: 0,
      userInfo: [],
      DialogList: {},
      input: '',
      isShowDialog: false
    }
  },
  components: {
    Pagination,
    ShowDialog
  },
  created () {
    this.loadList()
  },

  methods: {
    // 获取用户列表
    async loadList () {
      const res = await list(this.tablePage)
      // console.log(res)
      // console.log(res.data.list)
      this.userInfo = res.data.list
      this.userInfoItem = res.data
      this.count = res.data.counts
      // console.log(this.userInfoItem)
    },
    // 清空按钮
    clearInput () {
      this.input = ''
      this.loadList()
    },
    // 搜索按钮
    searchInput () {
      if (this.input === '') {
        return this.userInfo
      } else {
        const res = this.userInfo.filter(item => {
          return item.username.indexOf(this.input) !== -1
        })
        this.userInfo = res
        this.count = res.length
      }
    },
    // 弹框部分
    showDialog () {
      this.DialogList = {
        avatar: '',
        email: '',
        introduction: '',
        password: '',
        permission_group_id: null,
        phone: '',
        role: '',
        sex: '1',
        username: ''
      }
      this.isShowDialog = true
    },
    // 分页部分
    onLoadList (val) {
      this.tablePage.page = val
      this.loadList()
    },
    onSizeChange (val) {
      this.tablePage.pagesize = val
      this.loadList()
    },
    // 删除按钮
    async delUserItem (row) {
      this.$confirm('此操作将永久删除用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove(row)
        this.$message.success('删除成功')
        // 更新当前页码
        const totalPage = Math.ceil((this.count - 1) / this.tablePage.pagesize)
        const currentPage = this.tablePage.page > totalPage ? totalPage : this.tablePage.page
        this.tablePage.page = this.tablePage.page < 1 ? 1 : currentPage
        this.loadList()
      }).catch(() => {})
    },
    // 编辑按钮
    async editUserItem (row) {
      this.isShowDialog = true
      // console.log(row)
      this.DialogList = row
      // console.log(this.DialogList)
    },
    async onFormList (val) {
      console.log(val)
      // this.DialogList = await detail(val)
    }
  }
}
</script>

<style scoped lang='less'>
/deep/.el-card{
  margin: 20px !important;
}
.skyblue{
  background-color: rgb(236, 245, 255,0.3);
  border-color: rgb(167, 212, 238,0.3);
  color: rgb(64, 158, 255);
  &:hover{
  background-color: rgb(64, 158, 255);
  border-color: rgb(64, 158, 255);
  color: #fff;
  }
}
.red{
  background-color: rgb(254, 240, 240,0.3);
  border-color: rgb(252, 206, 206,0.3);
  color: rgb(245, 123, 120);
  &:hover{
  background-color: rgb(245, 108, 108);
  border-color: rgb(245, 108, 108);
  color: #fff;
  }
}

</style>
